<template>
  <div ref="editor"></div>
</template>

<script lang="ts">
  import WangEditor from 'wangeditor';

  export default defineComponent({
    name: 'RichTextEditor',
    props: {
      value: {
        type: String,
        default: '',
      },
      disable: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['update:value'],
    setup(props, context) {
      const editor = ref();

      const content = computed({
        set: (val) => context.emit('update:value', val),
        get: () => props.value,
      });

      let instance: WangEditor | null;

      onMounted(() => {
        instance = new WangEditor(editor.value);
        Object.assign(instance.config, {
          zIndex: 9,
          onchange: (html: string) => (content.value = html),
        });
        instance.create();

        watchEffect(() => (instance && props.disable ? instance.disable() : instance?.enable()));
      });
      watch(
        props,
        (value) => {
          instance && instance.txt.html(value.value);
        },
        {
          deep: true,
        },
      );
      onBeforeUnmount(() => {
        instance && instance.destroy();
        instance = null;
      });

      return {
        editor,
      };
    },
  });
</script>
